<template>
  <a-form class="content">
    <div class="steps">
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
    </div>
    <div class="xiantiao"></div>
    <div class="steps-content">
      <template v-if="steps[current].content == 'basicmsg'">
        <!-- 基本信息 -->
        <div class="BasicInformation">
          <span style="display: flex; justify-content: center; font-size: large">基本信息</span>
          <a-form ref="formRef" :rules="rules" :model="apiDetail" v-bind="layout" name="form_context" autocomplete="off">
            <a-form-item has-feedback label="接口分类" name="apiDirectoryCode">
              <a-tree-select
                v-model:value="apiDetail.apiDirectoryCode"
                show-search
                :field-names="fieldNames"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                tree-default-expand-all
                :tree-data="dataTree"
                @focus="handFocus"
              >
                <template #title="{ directoryName }">
                  {{ directoryName }}
                </template>
              </a-tree-select>
            </a-form-item>
            <a-form-item has-feedback label="接口名称" name="apiName">
              <a-input v-model:value="apiDetail.apiName" />
            </a-form-item>
            <a-form-item has-feedback label="接口来源" name="apiSource">
              <a-select v-model:value="apiDetail.apiSource" :options="InterFaceSource" />
            </a-form-item>

            <a-form-item label="接口描述" name="apiDescribe">
              <a-textarea v-model:value="apiDetail.apiDescribe" />
            </a-form-item>

            <span style="display: flex; justify-content: center; font-size: large">API参数</span>

            <a-form-item has-feedback label="协议" name="apiAgreement">
              <a-select v-model:value="apiDetail.apiAgreement" :options="Protocols" />
            </a-form-item>
            <a-form-item has-feedback label="IP端口" name="apiIpPort">
              <a-input v-model:value="apiDetail.apiIpPort" />
            </a-form-item>
            <a-form-item has-feedback label="Path" name="apiPath">
              <a-input v-model:value="apiDetail.apiPath" />
            </a-form-item>
            <a-form-item has-feedback label="请求方式" name="apiRequestMethod">
              <a-select v-model:value="apiDetail.apiRequestMethod" :options="apiRequestMethod" />
            </a-form-item>
            <a-form-item label="超时时间" name="apiRequestTimeout">
              <a-input v-model:value="apiDetail.apiRequestTimeout" />
            </a-form-item>
          </a-form>
        </div>
      </template>
      <template v-if="steps[current].content == 'parameterconfig'">
        <ParameterConfig></ParameterConfig>
      </template>
    </div>

    <div class="steps-action">
      <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步</a-button>
      <a-button v-if="current > 0" style="margin-left: -30%" danger @click="showModal">测试</a-button>
      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>

      <a-button style="margin-left: 8px" @click="cancel">取消</a-button>
      <a-button style="margin-left: 8px" @click="submit">保存并退出</a-button>

      <a-modal v-model:visible="visible" :title="null" :footer="null" width="60%" height="90%" :centered="true" @ok="handleOk">
        <Tests> </Tests>
      </a-modal>
    </div>
  </a-form>
</template>
<script setup lang="ts">
  import ParameterConfig from '../ArtificialRegister/components/ParameterConfig.vue';
  import Tests from './components/Tests.vue';
  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
  import { addDataApi, checkApi } from '@/api/test';
  import { TreeHooks } from '@/hooks/TreeStructure/TreeStructureHooks';
  // import { RequestMethod, Agreement } from '@/enums/statusEnum';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  // 引入hooks
  const { apiDetail, dispose } = getInterfaceDetailsHooks();
  const { dataTree, getTreeStructure } = TreeHooks();
  // 替换 treeNode 中 title,value,children 字段为 dataTree 中对应的字段
  const fieldNames = {
    children: 'children',
    title: 'directoryName',
    value: 'directoryCode',
  };
  //验证规则
  const rules: Record<string, Rule[]> = {
    apiDirectoryCode: [
      {
        required: true,
        message: '请选择接口分类',
      },
    ],
    apiName: [
      {
        required: true,
        message: '请输入正确的接口名称',
      },
      {
        pattern: /^[^\s]*$/,
        message: '不能输入空格',
      },
      {
        max: 30,
        message: '接口名称在30个字符以内',
      },
    ],
    apiSource: [
      {
        required: true,
        message: '请选择接口来源',
      },
    ],
    apiDescribe: [
      {
        max: 1000,
        message: '接口描述在1000个字符以内',
      },
    ],
    apiIpPort: [
      {
        required: true,
        message: '请输入IP端口号',
      },
      {
        pattern: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)+:\d{1,5}\/?$/,
        // pattern: /^((\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5]|[*])$/,

        message: '请输入正确的端口号',
      },
    ],
    apiPath: [
      {
        required: true,
        message: '请输入接口路径',
      },
      {
        pattern: /^\//,
        message: '请输入正确的路径',
      },
    ],
    apiRequestMethod: [
      {
        required: true,
        message: '请选择请求方式',
      },
    ],
    apiRequestTimeout: [
      {
        required: true,
        message: '请输入超时时间',
      },
      {
        pattern: /^[1-9]\d*$/,
        message: '请输入正整数',
      },
      {
        pattern: /^[0-9]$|^[0-9][0-9]$|^[0-9][0-9][0-9]$|^1[0-7][0-9][0-9]$|^1800$/,
        message: '超时时间在1800s以内',
      },
    ],
  };
  // 请求接口分类
  const handFocus = () => {
    getTreeStructure();
  };
  //表单
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };

  //接口来源
  const InterFaceSource = [
    {
      value: '数据服务',
      label: '数据服务',
    },
    {
      value: '指标管理',
      label: '指标管理',
    },
    {
      value: '决策引擎',
      label: '决策引擎',
    },
  ];

  //协议
  const Protocols = [
    {
      value: 'http',
      label: 'http',
    },
    {
      value: 'https',
      label: 'https',
    },
  ];
  //请求方式
  const apiRequestMethod = [
    {
      value: 'POST',
      label: 'POST',
    },
    {
      value: 'GET',
      label: 'GET',
    },
  ];

  const formRef = ref<FormInstance>();
  //保存并退出按钮
  const submit = async () => {
    await formRef.value?.validateFields();
    const validateInfo = dispose();
    let res = await addDataApi(validateInfo);
    console.log(res);
    if (res) {
      history.back();
    }
  };

  //头部导航栏
  const current = ref<number>(0);
  // 下一步
  const next = async () => {
    await formRef.value?.validateFields();
    const validateInfo = dispose();
    let res = await checkApi(validateInfo);
    if (res) {
      current.value++;
    }
  };
  //取消按钮
  const cancel = () => {
    history.back();

    // current.value--;
  };
  //上一步按钮
  const prev = () => {
    current.value--;
  };

  const steps = [
    {
      title: '基本信息',
      content: 'basicmsg',
    },
    {
      title: '参数配置',
      content: 'parameterconfig',
    },
  ];

  const visible = ref<boolean>(false);

  const showModal = () => {
    visible.value = true;
  };

  const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
  };
</script>

<style lang="less" scoped>
  .BasicInformation {
    margin-right: 20%;
  }

  .content {
    min-height: 200px;
    // margin-top: 1vh;
    // width: 100%;
    // margin-left: 30%;
    // margin-right: 30%;
    background: #fff;
    // border-bottom: 1px solid #e8e8e8;
  }

  .steps {
    margin-right: 30%;
    // margin-top: 1vh;
    margin-left: 30%;
    // border-bottom: 1px solid #e8e8e8;vh
  }

  .xiantiao {
    margin-top: 1vh;
    border-bottom: 1px solid #e8e8e8;
  }

  .steps-content {
    // margin-top: 1vh;
    display: flex;
    justify-content: center;
    // width: inherit;
    flex-direction: column;
    padding: 20px;
    // margin-left: 1%;
    // margin-right: 10%;
  }

  // .steps :global(.ant-form-item) {
  //   margin-top: 20px;
  //   width: 300%;
  //   margin-left: -146% !important;
  // }
  .steps-action {
    margin-top: 1vh;
    margin-right: 30%;
    margin-left: 43%;
    padding-bottom: 1vh;
  }
</style>
